<template>
  <view>
    <image src="/static/icon_bj.png" class="w100 absolute" mode="widthFix"></image>
    <view class="title-warp">
      <view class="title">综合素质实践管理平台-教师端</view>
      <!-- <image src="/static/icon_iu.png"></image> -->
    </view>
    <view class="w100 relative pl-24 pr-24">
      <view class="w100 bgff br-20 rows rowsm rowsw mb-20 mt-20 p-all-20 chartListUl">
        <!-- @click="$tools.goNext(item.path)" -->
        <view class="rowscl rowsm rowsb m-all-10" v-for="(item, index) in tabList" :key="index"
          @click="goSubmit(item)" style="width: 21%">
          <image :src="item.img" class="w-96 h-92 mb-10" mode=""></image>
          <view class="fs-28 fw-500 col333">{{ item.name }}</view>
        </view>
      </view>

      <view class="w100 rowsb rowsm mb-20" v-if="list1.length > 0">
        <view class="fs-30 col333 fw-b">通知公告</view>
        <view class="fs-24" style="color: #707070;" @click="$tools.goNext(`/pages/index/newsList?title=通知公告`)">更多>></view>
      </view>
      <view class="w100 p-all-24 bgff br-20 mb-20" v-for="(item, index) in list1" :key="item.name"
        @click="$tools.goNext('/pages/index/newsDetail?title=通知公告&id=' + item.id)">
        <view class="fs-28 col666 mb-30">{{ item.name }}</view>
        <view class="w100 rows rowsm" style="flex-direction: row-reverse;">
          <view class="fs-24 col888">{{ item.createTime }}</view>
        </view>
      </view>

      <view class="w100 rowsb rowsm mb-20" v-if="list2.length > 0">
        <view class="fs-30 col333 fw-b">政策资讯</view>
        <view class="fs-24" style="color: #707070;" @click="$tools.goNext(`/pages/index/newsList?title=政策咨询`)">更多>></view>
      </view>
      <view class="w100 p-all-24 bgff br-20 mb-20" v-for="(item, index) in list2" :key="index"
        @click="$tools.goNext('/pages/index/newsDetail?title=政策咨询&id=' + item.id)">
        <view class="fs-28 col666 mb-10">{{ item.title }}</view>
        <view class="w100 rows rowsm" style="flex-direction: row-reverse;">
          <view class="fs-24 col888">{{ item.createTime }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabList: [],
      list1: [],
	  list2: [],
      info: '',
      total: 0,
      limit: {
        pageNum: 1,
        pageSize: 10
      },
    }
  },
  onLoad() {
    uni.setStorageSync('token', true);
    this.getList();
  },
  onShow() {},
  mounted() {
    // 使用 $on 监听父页面通知
    uni.$on('sortedTabListUpdated', (sortedTabList) => {
      if (uni.getStorageSync("sortedTabList")) {
        this.getRouter();  // 执行其他操作
      } else {
        this.tabList = [
          {
            name: '实践任务',
            img: '/static/jiaoyu.png',
            // path:'/pagesCopy/submitWork/weekWork'
            path: '/teacher/practiceTask/practice'
          },
          {
            name: '知识问答',
            img: '/static/zhishi.png',
            path: '/teacher/trivia/index'
          },
          {
            name: '排行榜单',
            img: '/static/icon_ph.png',
            path: '/pages/index/rank'
          }
        ];
      }
    });
  },
  created() {
	  this.getList();
  },
  methods: {
    getRouter() {
      this.tabList = [
        {
          name: '实践任务',
          img: '/static/jiaoyu.png',
          // path:'/pagesCopy/submitWork/weekWork'
          path: '/teacher/practiceTask/practice'
        },
        {
          name: '知识问答',
          img: '/static/zhishi.png',
          path: '/teacher/trivia/index'
        },
        {
          name: '排行榜单',
          img: '/static/icon_ph.png',
          path: '/pages/index/rank'
        }
      ];
      // 根据是否存在 '实践审核-院级' 和 '实践审核-校级' 来重新排序 tabList
      let sortedList = [];
      sortedList = [this.tabList, uni.getStorageSync("sortedTabList")].reduce((acc, curr) => acc.concat(curr), []).filter(item => item !== '');;

      const hasCollegeAudit = sortedList.some(item => item.name === '报告审核');
      const hasSchoolAudit = sortedList.some(item => item.name === '报名审核');

      let sortedTabList = [];

      if (hasCollegeAudit || hasSchoolAudit) {
        sortedTabList = sortedList.filter(item => item.name !== '实践任务' && item.name !== '排行榜单' && item.name !== '知识问答');
        sortedTabList.unshift(sortedList.find(item => item.name === '实践任务')); // 插入 "实践任务"
        sortedTabList.push(sortedList.find(item => item.name === '知识问答')); // 插入 "知识问答"
        sortedTabList.push(sortedList.find(item => item.name === '排行榜单')); // 插入 "排行榜单"
      }
      this.tabList = Array.from(
        new Map(sortedTabList.map(item => [item.name, item])).values()
      );
    },
    goSubmit(item) {
      // this.$tools.goNext(`/pagesCopy/submitWork/weekWork?type=${i}&title=${title}`)
      this.$tools.goNext(`${item.path}?title=${item.name}`)
    },
    getList() {
      this.$tools.axiosFromToken('POST', 'pronotice/list', {}, '加载中').then(res => {
        if (res.code != 200) return this.$tools.showtt(res.msg)
        this.list1 = res.rows.length>2? res.rows.slice(0, 2) : res.rows;
      })
      this.$tools.axiosFromToken('POST', `prozczx/list`, {}, '加载中').then(res => {
        if (res.code != 200) return this.$tools.showtt(res.msg)
        this.list2 =res.rows.length>2? res.rows.slice(0, 2) : res.rows;
      })
    }
  },
}
</script>

<style lang="scss">
page {
  background: #f7f6fa;
}

//  .uni-nav-bar-text{
//   display: inline-block;
//   font-size: 18px !important;
//   margin-top: 24px !important;

//  }

//  .relative{
//   top: 20px;
//  }
.title-warp {
  width: 100%;
  position: relative;
  height: 80px;

  .title {
    font-size: 18px;
    display: block;
    line-height: 100px;
    text-align: center;
  }

  image {
    width: 40rpx;
    height: 40rpx;
    position: absolute;
    top: 77px;
    left: 15px;
  }
}

	.chartListUl {
		display: flex;
		        justify-content: space-between;// space-between：两端对齐，子元素间隔相等 space-around：子元素两侧的间隔相等。
		        flex-wrap: wrap; //  wrap（向下换）
		width: 100%; 
		box-sizing: border-box;
	}
	    .chartListUl:after{  // 使用伪类元素占据单位，不影响页面
	        content: "";
	        height: 0;
	        width: 21%;
	    }
// @media (max-width: 768px) {
//   .rowscl {
//     width: 46%;  /* 在小屏幕下，每行显示2个项 */
//   }
// }

// @media (max-width: 480px) {
//   .rowscl {
//     width: 100%;  /* 在更小的屏幕下，每行显示1个项 */
//   }
// }
</style>
